<template>
    <div class="app-main">
        <myheader title="记录详情"/>
        <mt-navbar v-model="selected" class="nav_box">
            <mt-tab-item id="1">门禁</mt-tab-item>
            <mt-tab-item id="2">系统信息</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <mt-tab-container v-model="selected">

            <mt-tab-container-item id="1"
                                   v-infinite-scroll="loadMore"
                                   infinite-scroll-disabled="loading"
                                   infinite-scroll-distance="10">
                <template v-for="record in records">
                    <mt-cell v-if="record.accessType=='0'" :title="record.customerName+' 刷脸回家'"
                             :label="record.createTime" is-link to="/message" class="main-detail"/>
                    <mt-cell v-if="record.accessType=='1'" :title="record.customerName+' 刷卡回家'"
                             :label="record.createTime" is-link to="/message" class="main-detail"/>
                </template>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <mt-cell :title="'测试 '"/>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selected: "1",
                loading: false,
                records: [],
                customerNo: this.$store.getters.customerNo,
                pageSize: 11,
                pageOffset: 0,
                total: 0
            }
        },
        mounted(){
        },
        methods: {
            loadMore(){
                console.log("pageSize", this.pageOffset + this.pageSize, "total", this.total)
                if (this.pageOffset + this.pageSize > this.total && this.total != 0)return
                this.$ajax.get("/ccAccessRecordApiController/getAccessRecordList", {
                    customerNo: this.customerNo,
                    pageSize: this.pageSize,
                    pageOffset: this.pageOffset
                }, result => {
                    this.pageOffset = this.pageOffset + this.pageSize - 1
                    this.pageSize = 4
                    this.total = result.total
                    for (let index in result.rows) {
                        this.records.push(result.rows[index])
                    }
                })

            }
        }

    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .mint-tab-item-label {
        font-size: 14px !important;
    }

    .nav_box {
        height: 50%;
        border: 1px solid #eee;
    }

    .main-detail {
        padding-left: 20px;
        width: 96%;
        margin-top: 15px;
        border-bottom: 1px solid #eee;
    }

    .main-detail .mint-cell-label {
        padding-bottom: 5px;
    }

    .message-contanier {
    }
</style>
